import { Component } from 'react';
import { Cross } from '@react-vant/icons';
import './index.less'
import { Input, Button, Toast } from 'react-vant';
import { sendUserCode,userLogin} from '../../api/user';
import WithRouter from '../../router/withRouter'
class Login extends Component {
    state={
        s:null,
        timer:null,
        title:"发送验证码",
        phone:"",
        code:""
    }
    render() {
        return (
            <div className='login_page'>
                <div>
                    <Cross color='#919191' fontSize={20} onClick={()=>{
                         this.props.router.navigate(-1)
                    }}/>
                </div>
                <div className='login'>
                    <div className='title'>
                        短信登录
                    </div>
                    <div className='inp'>
                        <Input
                            placeholder='请输入手机号'
                            value={this.state.phone}
                            clearable
                            onChange={(value)=>{
                                this.setState({
                                    phone:value
                                })
                            }}
                        />
                    </div>
                    <div className='inp code'>
                    <div>
                    <Input
                            placeholder='请输入短信验证码'
                            value={this.state.code}
                            clearable
                            onChange={(value)=>{
                               this.setState({
                                code:value
                               }) 
                            }}
                        />
                    </div>
                    <div className='code_text' onClick={()=>this.sendCode()}>
                        {this.state.title}
                    </div>
                    </div>
                    <div style={{marginTop:"20px",padding:'0 10px'}}>
                        <Button  block color='linear-gradient(to right, rgb(255, 153, 153), rgb(255, 161, 121))' onClick={()=>this.login()}>
                            登录
                        </Button>
                    </div>
                </div>
            </div>
        )
    }
   async sendCode(){
        let {s,timer,phone} = this.state;
        console.log(phone)
        var re = /^1[3,4,5,6,7,8,9][0-9]{9}$/;
        if(!phone){
            Toast.info("请输入手机号")
            return
        }
        if(!re.test(phone)){
            Toast.info("请输入正确手机号");
            return
        }
        if(timer){
            return
        }
        s=59;
        this.setState({
            s:s,
            title:s+"秒后再次发送"
        })
        timer = setInterval(()=>{
            s--
            if(s==0){
                clearInterval(timer);
                timer = null;
                s=null
                this.setState({
                    title:"再次发送",
                    timer:timer,
                    s:s
                })
                return
            }
            this.setState({
                s:s,
                timer:timer,
                title:s+"秒后再次发送"
            })
        },1000)
     let res = await sendUserCode({phone:phone});
    }
   async login(){
        let {phone,code} = this.state;
        if(!phone ||!code){
            Toast.info("请您补充完整信息！")
            return
        }
        let res = await userLogin({phone:phone,captcha:code});
        if(res.data.code==200){
            Toast.success("登录成功");
            // 将登录成功的token存储到本地
            localStorage.setItem("USER_LOGIN",res.data.data.token);
            this.props.router.navigate(-1)
        }else{
            Toast.fail(res.data.message)
        }
    }
}
export default WithRouter(Login)